<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<title>Insert title here</title>
</head>
<script>
	window.onload = function(){
		var canvas = document.getElementById('mycanvas');
		var ctx = canvas.getContext('2d');
		
		/*ctx.strokeStyle = '#ff0000';
		ctx.beginPath();
		ctx.arc(100, 200, 45, 0, Math.PI*1.5, true);
		ctx.stroke();     //순서 바꿔서 해보고, 트루 폴스 바꿔서 해보고 
		ctx.closePath();
		
		// 콘형
		ctx.strokeStyle = '#0000ff';
		ctx.lineWidth = '5';
		ctx.fillStyle = '#aaaaff';
		ctx.beginPath();
		ctx.moveTo(300,300);
		ctx.arc(300, 200, 45, Math.PI*0, Math.PI*1.0, true);		
		    				 //순서 바꿔서 해보고, 트루 폴스 바꿔서 해보고 
		ctx.closePath();
		ctx.fill();
		ctx.stroke();
		
		// 팩맨 만들기 
		ctx.strokeStyle = '#0000ff';
		ctx.fillStyle = '#0000ff';
		ctx.beginPath();
		ctx.moveTo(500,200);
		ctx.arc(500, 200, 45, -0.4, Math.PI*0.2, true);
		ctx.closePath();	
		ctx.fill();
		ctx.stroke();     //순서 바꿔서 해보고, 트루 폴스 바꿔서 해보고 
		
		
		//딜레이 
		ctx.strokeStyle = '#0000ff';
		ctx.fillStyle = '#0000ff';
		ctx.beginPath();
		ctx.moveTo(500,200);
		ctx.arc(500, 200, 45, 0, Math.PI*2, true);
		ctx.closePath();	
		ctx.fill();
		ctx.stroke();
		
		// 팩맨 눈
		ctx.strokeStyle = '#ffffff';
		ctx.fillStyle = '#ffffff';
		ctx.beginPath();
		ctx.arc(505, 180, 7, 0, Math.PI*2, true);
		ctx.closePath();	
		ctx.fill();
		ctx.stroke();
		*/
		
		/* // 그래프 1
			
		ctx.strokeStyle = "#ff0000";
		ctx.strokeRect(100, 0, 1, 300);
		ctx.strokeRect(100, 100, 50, 200);
		ctx.strokeRect(150, 200, 50, 100);
		ctx.strokeRect(200, 150, 50, 150);
		ctx.strokeRect(250, 160, 50, 140);
		ctx.strokeRect(100, 300, 300, 1);
		ctx.stroke();
	     */
	    
	   // 그래프 2 
	    ctx.strokeStyle = "#ff0000";
	   	    
	    ctx.moveTo(100, 0);			// 세로선 
	    ctx.lineTo(100,300);
	    ctx.moveTo(100,300);		// 가로선
	    ctx.lineTo(700,300);	    
	 
	    ctx.moveTo(100,100);		// 계속 따라감 
	    ctx.lineTo(200,50);
	    ctx.lineTo(250,150);
	    ctx.lineTo(400,100);
	    ctx.lineTo(500,200);
	    ctx.lineTo(670,130);
	    ctx.lineTo(700,50);
	    ctx.stroke();
	  
	    
	   
	
	}
</script>
<body>
	<canvas id = 'mycanvas' width = '600px' height = '500px'>
	</canvas>
</body>
</html>